import { useUserInfo } from "@/features/business/HomePage_deprecated"
import { useAuth as useAuthV2 } from "@/features/useAuth"
import { useLoginAction } from "@/features/useSearchAction"
import ENV from "@/utils/env"
import { CustomError } from "@/utils/error"
import { css } from "@emotion/react"
import styled from "@emotion/styled"
import { useUserWallet } from "@/features/business/HomePage_deprecated/atoms_deprecated"
import AgreeHint from "./components/AgreeHint"
import PasswordInputFormItem from "./components/PasswordInputFormItem"
import PhoneInputFormItem from "./components/PhoneInputFormItem"
import { SubmitButtonPassword } from "./components/SubmitButtons"
import { LoginPasswordForm } from "./data"
import { LoginLayout } from "./layouts"
import { useCallback } from "react"
import Svg from "@/components/base/Svg"

const CurrentForm = LoginPasswordForm

const Block = styled.div``

function LoginPasswordPage() {
    const { getUserInfo } = useUserInfo()
    const { getUserWallet } = useUserWallet()
    const auth = useAuthV2()
    const { payload, loginSuccess, moveToStep, close } = useLoginAction()
    const form = CurrentForm.useForm({
        mode: "onChange",
        defaultValues: {
            countryCode: payload.data?.countryCode ?? "+63",
            number: payload.data?.number || "",
            password: "",
            agreeTerms: false,
        },
    })

    const handleLoginSuccess = useCallback(async () => {
        await getUserInfo()
        getUserWallet()
        loginSuccess()
    }, [getUserInfo, getUserWallet, loginSuccess])

    return (
        <LoginLayout
            css={css`
                border-radius: 8rem 8rem 0 0;
                position: relative;
            `}
        >
            {/* 右上角关闭按钮 */}
            <Svg
                src={"login_page_v2/close.svg"}
                css={css`
                    position: absolute;
                    top: 16rem;
                    right: 16rem;
                    width: 16rem;
                    height: 16rem;
                `}
                onClick={close}
            />

            <Block
                css={css`
                    margin-top: 16rem;
                `}
            />
            <h3
                css={css`
                    padding: 0;
                    margin: 0;
                    font-family: Gilroy;
                    font-weight: 400;
                    font-size: 14rem;
                    line-height: 20rem;
                    letter-spacing: 0%;
                    text-align: center;
                    color: #cc0033;
                `}
            >
                Welcome to filbet
            </h3>
            <Block
                css={css`
                    margin-top: 16rem;
                `}
            />
            <h1
                css={css`
                    padding: 0;
                    margin: 0;
                    font-family: Gilroy;
                    font-weight: 700;
                    font-size: 22rem;
                    line-height: 36rem;
                    text-transform: capitalize;
                `}
            >
                Login With Password
            </h1>
            <Block
                css={css`
                    margin-top: 40rem;
                `}
            />
            <CurrentForm.FormProvider {...form}>
                <PhoneInputFormItem />
                <PasswordInputFormItem />
                <SubmitButtonPassword
                    css={css`
                        margin-top: 12rem;
                    `}
                    onSubmit={async (data) => {
                        if (!data.agreeTerms) {
                            form.setError("agreeTerms", {
                                message: "You must agree to the terms and conditions",
                            })
                            return
                        }
                        try {
                            const result = await auth.loginWithPassword(
                                data.countryCode,
                                data.number.replace(/\s/g, ""),
                                data.password,
                            )
                            if (result.success) {
                                return handleLoginSuccess()
                            }
                            throw result.error
                        } catch (error) {
                            if (error instanceof CustomError) {
                                form.setError("password", { message: error.message })
                            } else {
                                form.setError("password", { message: "Failed to login" })
                            }
                        }
                    }}
                >
                    Login
                </SubmitButtonPassword>
                <Block
                    css={css`
                        margin-top: 12rem;
                    `}
                />
                <AgreeHint formUrl={"homeLoginPassword"} />
                <button
                    css={css`
                        border: none;
                        background: none;
                        font-family: Gilroy;
                        font-weight: 400;
                        font-size: 16rem;
                        line-height: 24rem;
                        letter-spacing: 0%;
                        text-align: center;
                        color: #005ae0;
                        cursor: pointer;
                        align-self: center;
                    `}
                    onClick={() => {
                        moveToStep("login-otp-1", {
                            countryCode: form.watch("countryCode"),
                            number: form.watch("number"),
                        })
                    }}
                >
                    Login With Code
                </button>
            </CurrentForm.FormProvider>
        </LoginLayout>
    )
}

export default LoginPasswordPage
